<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LintenMe</title>
	<link rel="stylesheet" type="text/css" href="./css/base.css">
	<link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" /> 	
	<style type="text/css">
      body{background: url("./img/1.jpg");overflow: hidden;}
      *{font-family: 'Microsoft Yahei'}
      #center{width: 1000px;height: 500px;margin:0 auto;position: relative;margin-top: 100px;}
      #center .left{width: 200px;height: 200px;text-align: center;margin: 100px auto;position: relative;/*border: 1px solid #fff*/}
      #center .left img{width: 200px;height: 200px;border-radius: 50%;}
      #center .left .pic{position: absolute;
			animation:myfirst 10s linear infinite;
			-moz-animation:myfirst 10s linear infinite; 
			-webkit-animation:myfirst 10s linear infinite; 
			-o-animation:myfirst 10s linear infinite; 
      }
      #center .left .btn{width: 80px;height: 80px;border-radius: 50%;cursor: pointer;border: 2px solid #fff;position: absolute;left: 60px;top: 60px;}
      #center .left .btn .play{
      	border-left-width: 30px;
      	border-top-width: 20px;
      	border-right-width: 30px;
      	border-bottom-width: 20px;
      	border-style: solid;
      	border-left-color: #fff;
      	border-top-color: transparent;
      	border-right-color: transparent;
      	border-bottom-color: transparent;
      	position: absolute;
      	left: 28px;top: 20px;
      }
      #center .left .btn .play:hover{}
      #center .right{width: 500px;height: auto;font-family: 'Microsoft Yahei' ;font-size: 16px;color: #fff;text-align: center;overflow: hidden;margin: 0 auto;}

     .nav{position: absolute;width: 100%;height: 50px;left: 0;bottom: 0;text-align: center;line-height: 50px;}
     .nav a{text-align: center;color: #ccc;font-size: 12px;text-decoration: none;opacity: 0.5;padding-right: 10px;}
     .nav a:hover{color: #fff;opacity: 1}
     
@keyframes myfirst
{
0%   {transform:rotate(0deg)}
20%  {transform:rotate(72deg)}
40%  {transform:rotate(144deg)}
60%  {transform:rotate(216deg)}
80% {transform:rotate(288deg)}
100% {transform:rotate(360deg)}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {transform:rotate(0deg)}
20%  {transform:rotate(72deg)}
40%  {transform:rotate(144deg)}
60%  {transform:rotate(216deg)}
80% {transform:rotate(288deg)}
100% {transform:rotate(360deg)}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {-webkit-transform:rotate(0deg)}
20%  {-webkit-transform:rotate(72deg)}
40%  {-webkit-transform:rotate(144deg)}
60%  {-webkit-transform:rotate(216deg)}
80% {-webkit-transform:rotate(288deg)}
100% {-webkit-transform:rotate(360deg)}
}

@-o-keyframes myfirst /* Opera */
{
0%   {transform:rotate(0deg)}
20%  {transform:rotate(72deg)}
40%  {transform:rotate(144deg)}
60%  {transform:rotate(216deg)}
80% {transform:rotate(288deg)}
100% {transform:rotate(360deg)}
}
	</style>
</head>

<body>
	<div id="center">
		<div class="left">
			<div class="pic">
			   <img src="./<{$pic}>" id="pic">
		    </div>
		    <div class="btn" id="btn">
		    	<div class="play"></div>
		    </div>
		</div>
		<audio  autoplay="autoplay" id="music">
             <source src="<{$src}>">
		</audio>
	</div>
	<!-- 下方的导航 -->
	<div class="nav" id="nav">
		<a href="about.html" target="_blank">关于</a>
		<a href="index.php?action=mes" target="_blank">留言</a>
		<a href="index.php?action=set" target="_blank">设置</a>
	</div>
</body>
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    

	//获取音乐的长度
	var music=document.getElementById("music");
	var pic=document.getElementById("pic");
	music.oncanplay=function(){
		//alert(music.duration);
	}

	//播放结束  触发ajax事件  异步加载，歌曲切换
	music.onended=function(){
		//alert("播放结束");
    	//创建引擎
		var xmlHttpRequest;
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		     xmlHttpRequest=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		      xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
		  }
	    if(xmlHttpRequest){
		    var url="index.php?action=change";
		    //var msg=document.getElementById("pass").value;
		    var data="";
			xmlHttpRequest.open("post",url,true);
			xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//在这里指定回调函数,初步尝试，回调函数不能写在外面	   
		    xmlHttpRequest.onreadystatechange=function handle(){
			    if(xmlHttpRequest.readyState==4){
			         if(xmlHttpRequest.status==200){
			         	//获取json字符串
		                var str=xmlHttpRequest.responseText;
		                //把json字符串转换成对象
		                var strobj=eval("("+str+")");
		                //通过属性名称取出属性值
		                music.src=strobj.src;	
		                //歌手头像
		                pic.src=strobj.pic;

			         }      
			    } 		    	
		    };
		    //最后一步，发送数据
		    xmlHttpRequest.send(data);
            //这种方式是post提交方式
	    }		
	}


</script>
</html>